/**
 * AnimationsDialog
 */
 
 import eventHelper from "../../../util/EventHelper";

 var React = require("react");
 var tool = require("../../../util/tool");
 var consts = require("../../../util/consts");
 var dataProvider = require("../provider/dataProvider");
 var AnimationsDialog = React.createClass({
    getInitialProps: function (){
        return {
            root: {},
            data: {}
        }
    },
    getInitialState: function (){
        return {

        }
    },
    componentWillMount: function (){
        this.form = {};
        this.ThreedList = [];

        var self = this;
        var widgets = dataProvider.widgets;
        widgets.forEach(function (widget){
            var data = $.extend(true, {}, widget);
            if (data.type == consts.WIDGET_TYPE.THREED){
                // 有播放动作或者贴图的才可选
                self.ThreedList.push(data);
            }
        });

        var data = this.props.data;
        if (data.action){
            this.form.model = data.action;
        }
    },
    handleOnSelectThreed: function (type, param, materialType, index){
        var objEvent = arguments[arguments.length - 1];

        var widget = this.props.data, params;
        var element = $(objEvent.target), val = element.val();

        var select_material;

        if ("widget_id" === type){
            params = {
                widget_id: val
            };
        } else if("select_material" == type) {
            // base
            if (materialType === this.CONST.MATERIAL_TYPE.BASE){
                select_material = widget.action.select_material ? widget.action.select_material : {};
                select_material[param] = val;
                params = {
                    select_material: select_material
                };
            // extra
            } else if(materialType === this.CONST.MATERIAL_TYPE.EXTRA) {
                var select_materials = widget.action.select_materials;
                select_materials[index][param] = val;
                params = {
                    select_materials: select_materials
                };
            }
        } else if("select_animation" === type) {
            var animations = widget.action.select_animations || [];
            var index = animations.indexOf(param);
            param = parseInt(param);
            if (index == -1){
                animations.push(param);
            } else {
                animations.splice(index, 1);
            }
            params = {
                select_animations: animations,
                select_animation: parseInt(animations[0])
            };
        } else if("looptype" === type) {
            var looptype = !widget.action.looptype ? 1 : 0;
            params = {
                looptype: looptype
            };
        }

        $.extend(widget.action, params);

        if (!widget.action.widget_id){
            delete widget.action.select_material;
            delete widget.action.select_materials;
            delete widget.action.select_animation;
            delete widget.action.select_animations;
        }
        if(!widget.action.select_animations){
            delete widget.action.select_animation;
        } else if(!widget.action.select_animations.length){
            delete widget.action.select_animation;
        }

        this.updateWidget(widget);
    },
    updateWidget: function (widget){
        var root = this.props.root;
        root.updateLocaleWidget(widget);
    },
    handleOnSubmit: function (){
        var data = this.props.data;
        var root = this.props.root;
        var fromTemplate = this.props.fromTemplate;
        if(fromTemplate){
            root.updateSpecifyWidget(data);
        }
        root.closeDialog();
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    render: function (){
        var root = this.props.root,
            data = this.props.data;
        var rStyle = {
            position: "fixed",
            top: "50%",
            left: "50%",
            width: "400px",
            height: "auto",
            marginLeft: "-200px",
            marginTop: "-170px",
            display: "block",
            borderRadius: '5px',
        };
        var hasThreedNode = "";
        var widget = this.props.data;
        var form = this.form;
        form.model.select_materials = form.model.select_materials || [];

        // 获取当前选中模型
        var chooseThreed = null;
        this.ThreedList.forEach(function (threed){
            if (form.model.widget_id == threed.id){
                chooseThreed = threed;
            }
        });

        // 当前选中模型的数据
        var u3d_animations = (chooseThreed && chooseThreed.u3d_animations) ? chooseThreed.u3d_animations : [];

        var animationsNode = "";
        if (this.ThreedList.length){
            hasThreedNode =
                <select name='widget_id' onChange={this.handleOnSelectThreed.bind(this,"widget_id")} className='select-threed' value={widget.widget_id}>
                    {
                        this.ThreedList.map(function(threed){
                            var fbx_name = threed.u3d_fbx_name || threed.html;
                            return(
                                <option value={threed.id} key={threed.id}>{fbx_name}</option>
                            )
                        }.bind(this))
                    }
                </select>
                if (u3d_animations.length){
                      animationsNode =
                          <div className="threed_animation_default">
                              {
                                  u3d_animations.map(function (u3d_animation, pos){
                                      this.pos = pos;
                                      return (
                                          <div key={u3d_animation[0]} className="animation_default_list select-threed" name="select_animation" onClick={this.handleOnSelectThreed.bind(this, "select_animation", this.pos)} data-value={this.pos}>
                                              <div className={"info-item-icon " + ((form.model.select_animations.indexOf(pos) == -1) ? "icon-uniF471" : "icon-uniF52F")}></div>
                                              <span className="animation_default_name">{u3d_animation[0]}</span>
                                              <span className="pull-right">
                                                  <span>{u3d_animation[1][0]}</span>
                                                  <span>-</span>
                                                  <span>{u3d_animation[1][1]}</span>
                                                  <span>f</span>
                                              </span>
                                          </div>
                                      )
                                  }.bind(this))
                              }
                          </div>
                  } else if(!u3d_animations.length && form.model.widget_id){
                      animationsNode =
                          <div className="threed_animation_default">
                              <div className="no_default_sd">{$._("No action in model")}</div>
                          </div>
                  }
        }
        return (
            <dialog ref="dialog" style={rStyle} className="btg-modal widget-form materialsDialog">
                <div className='form-horizontal'>
                    <div className="btg-modal-content location-region">
                        <div className="form-horizontal">
                            <div className="widget-form-title">
                                <label>{$._("Play model action")}</label>
                            </div>
                        </div>
                        <div className='select-container'>
                            <div className='threed_3d'>
                                <div className="select_3d">
                                    <label>{$._("Model choose")}</label>
                                    <select style={{display: this.ThreedList.length ? "none" : "inline-block"}}>
                                        <option>{$._('no model in this page')}</option>
                                    </select>
                                    {hasThreedNode}
                                </div>
                                <div className="info-item">
                                  <label className="label-repeat info-item-label">{$._("Loop playBack single action")}</label>
                                  <div className={"select-threed info-item-icon " + (form.model.looptype ? "icon-uniF52F" : "icon-uniF471")} onClick={this.handleOnSelectThreed.bind(this, "looptype")} name="looptype"></div>
                                </div>
                                <div className="tip">
                                  {$._("multiple click will in order to switch multiple action")}
                                </div>
                                {animationsNode}
                            </div>
                        </div>
                        <div className="form-group buttons">
                            <button type="button" onClick={this.handleOnSubmit}>
                                <span>{$._("Submit")}</span>
                            </button>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = AnimationsDialog;
